<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-navbar :is-back="false" title="校园报修" back-icon-color='#333333' height="50" :border-bottom="false">
			<text class="iconfont icon-fanhuijian2" style="font-size:30rpx; margin-left:30rpx; font-weight:bold;"
				@click="previous_pages"></text>
		</u-navbar>
		<view class="top">
			<view class="topBox">
				<view v-for="(topItem,topIndex) of maintenance_list" :key="topIndex" :data-name="topIndex"
					@click="changeIndex" :class="[activeIndex==topIndex?'con':'']">
					<text></text>
					{{topItem}}
				</view>
			</view>
		</view>
		<view class="" v-show="activeIndex==0">
			<view class="grade_list">
				<view class="grade">
					<view class="grade_line" v-for="(item,index) in repair_list" :key="index" @click="change_sub(index)"
						:id="[index==num?'sub':'']" :class="[num==repair_list.length-1?'active':'']">
						{{item.name}}
					</view>
				</view>
				<view id="teacher">
					<view class="total_teacher">
						<text>全选</text>
						<text class="iconfont icon-duigou" style="color:#2f96fe;font-size:30rpx;"
							v-show="grade_entire"></text>
					</view>
					<view class="all_teacher" v-for="(i,j) in repair_list[num].next_level" :key="j"
						@click="change_teacher(num,j)">
						<text>{{i.name}}</text>
						<text class="iconfont icon-duigou" style="color:#2f96fe;font-size:30rpx;"
							v-show="i.boolen"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-show="activeIndex==1">
			<view class="grade_list">
				<view class="grade">
					<view class="grade_line" v-for="(item,index) in maintenance_lists" :key="index"
						@click="change_sub(index)" :id="[index==maintenance_num?'sub':'']"
						:class="[maintenance_num==maintenance_lists.length-1&&maintenance_lists.length>1?'active':'']">
						{{item.name}}
					</view>
				</view>
				<view id="teacher">
					<view class="total_teacher">
						<text>全选</text>
						<text class="iconfont icon-duigou" style="color:#2f96fe;font-size:30rpx;"
							v-show="maintenance_entire"></text>
					</view>
					<view class="all_teacher" v-for="(i,j) in maintenance_lists[maintenance_num].next_level" :key="j"
						@click="change_teacher(maintenance_num,j)">
						<text>{{i.name}}</text>
						<text class="iconfont icon-duigou" style="color:#2f96fe;font-size:30rpx;"
							v-show="i.boolen"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="location">
			<view class="">
				<text>位置</text>
				<text>{{maintenance_content}}</text>
				<text @click="jump_pages">选择位置</text>
			</view>

		</view>
		<view class="remark">
			<view class="">
				<text>备注</text>
				<u-input v-model="form.remark" style="margin-left:90rpx; width: 180rpx;" :type="type" placeholder="单行输入"
					:border="border" input-align="right" />
			</view>
		</view>
		<view class="upload">
			<view class="">
				<text>上传</text>
				<text>上传附件{{uploadFile.length}}件</text>
				<image src="../../static/tupian111.png" mode="widthFix" @click.stop="openFile"></image>
			</view>
		</view>
		<view class="confirm">
			<view class="cancel">
				{{cancel}}
			</view>
			<view class="verify" @click.stop="addRepair">
				{{verify}}
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../request.js'
	import time from '../../time.js'
	export default {
		data() {
			return {
				grade_list: [],
				grade_entire: false,
				maintenance_entire: false,
				activeIndex: 0,
				typeIdArr: [],
				contentIdArr: [],
				maintenance_list: ['信息化报修', '总务报修'],
				maintenance_obj: {},
				maintenance_num: 0,
				num: 0,
				uploadFile: [],
				cancel: '取消',
				verify: '确认',
				type: 'text',
				repairId: '',
				border: false,
				form: {
					type_id: '',
					content_id: '',
					room_id: '',
					remark: '',
					pics: "",
				},
				upload_form: {
					type_id: '',
					content_id: '',
					room_id: '',
					remark: '',
					pics: "",
					repair_id: '',
				},
				content: '',
				type_id: '',
				content_id: '',
				maintenance_content: '',
				repair_list: [{
					name: '',
					next_level: [{
						repair_type_id: '',
						name: '',
					}]
				}],
				maintenance_lists: [{
					name: '',
					next_level: [{
						repair_type_id: '',
						name: '',
					}]
				}],
			}
		},
		onLoad(option) {
			this.typeLists(1);
			this.typeLists(2);
			if (option.address) {
				this.maintenance_content = option.address.substr(0, 20) + '...';
			}
			if (option.id) {
				this.form.room_id = option.id;
				this.upload_form.room_id = option.id;
			}
			if (option.repairId) {
				this.repairId = option.repairId;
			}
			this.repairInfo();
		},
		methods: {
			changeIndex(e) {
				console.log(e.currentTarget.dataset.name);
				let index = e.currentTarget.dataset.name;
				this.activeIndex = index;
				switch (this.activeIndex) {
					case 0:
						for (let i = 0; i < this.repair_list.length; i++) {
							this.repair_list[i].boolen = false;
							for (let j = 0; j < this.repair_list[i].next_level.length; j++) {
								this.repair_list[i].next_level[j].boolen = false;
							}
						}
						break;
					case 1:
						for (let i = 0; i < this.maintenance_lists.length; i++) {
							this.maintenance_lists[i].boolen = false;
							for (let j = 0; j < this.maintenance_lists[i].next_level.length; j++) {
								this.maintenance_lists[i].next_level[j].boolen = false;
							}
						}
						break;
				}

			},
			jump_pages() {
				if (this.repairId) {
					this.$toLink('../select_position/select_position', {
						obj: this.maintenance_obj.room_info,
						id: this.repairId
					});
				} else {
					this.$toLink('../select_position/select_position', {});
				}
			},
			previous_pages() {
				this.$toLink('../maintenance/maintenance', {})
			},
			getAll() {
				console.log('进来吗')
				switch (this.activeIndex) {
					case 0:
						this.grade_entire = !this.grade_entire;
						if (this.grade_entire) {
							for (let i = 0; i < this.repair_list.length; i++) {
								for (let j = 0; j < this.repair_list[i].next_level.length; j++) {
									this.repair_list[i].next_level[j].boolen = true;
								}
							}
						} else {
							for (let i = 0; i < this.repair_list.length; i++) {
								for (let j = 0; j < this.repair_list[i].next_level.length; j++) {
									this.repair_list[i].next_level[j].boolen = false;
								}
							}
						}
						break;
					case 1:
						this.maintenance_entire = !this.maintenance_entire;
						if (this.maintenance_entire) {
							for (let i = 0; i < this.maintenance_lists.length; i++) {
								for (let j = 0; j < this.maintenance_lists[i].next_level.length; j++) {
									this.maintenance_lists[i].next_level[j].boolen = true;
								}
							}
						} else {
							for (let i = 0; i < this.maintenance_lists.length; i++) {
								for (let j = 0; j < this.maintenance_lists[i].next_level.length; j++) {
									this.maintenance_lists[i].next_level[j].boolen = false;
								}
							}
						}
						break;
				}
			},
			change_sub(param) {
				switch (this.activeIndex) {
					case 0:
						this.num = param;
						break;
					case 1:
						this.maintenance_num = param;
						break;
				}
			},

			openFile() {
				let base_url = uni.getStorageSync('host');
				let _this = this;
				uni.chooseFile({
					count: 6, //默认9
					extension: ['.zip', '.doc'],
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						const uploadTask = uni.uploadFile({
							formData: {
								files: res.tempFilePaths[0],
							},
							url: base_url + 'system/files/upload',
							filePath: res.tempFilePaths[0],
							name: 'files',
							success: function(res) {
								let list = JSON.parse(res.data);
								console.log(list.data);
								_this.uploadFile.push(list.data.url);

							}
						});
					}
				});
				// this.$refs.filemanager._openFile()
			},
			addRepair() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				this.form.content_id = this.content_id;
				console.log(this.form.content_id);
				this.form.type_id = this.type_id;
				this.form.pics = this.uploadFile.join(',');
				if (this.form.room_id) {
					request({
						url: base_url + 'teacher/repair/addRepair',
						method: 'post',
						data: {
							...this.form,
						},
						success(res) {
							if (res.statusCode == 200) {
								console.log(res.data);
								_this.$toLink('../maintenance/maintenance', {});
							} else {
								_this.$refs.uToast.show({
									title: res.data.message || '系统错误',
									type: 'warning',
								})
							}

						}
					})
				} else {
					this.$refs.uToast.show({
						title: '请选择位置',
						type: 'warning',
					})
				}

			},
			//更新
			updateRepair() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				this.upload_form.content_id = this.content_id;
				console.log(this.upload_form.content_id);
				this.upload_form.type_id = this.type_id;
				this.upload_form.pics = this.uploadFile.join(',');
				this.upload_form.remark = this.form.remark;
				request({
					url: base_url + 'teacher/repair/updateRepair',
					method: 'post',
					data: {
						...this.form,
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data);
							_this.$toLink('../maintenance/maintenance', {});
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})

			},
			repairInfo() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/repair/repairInfo',
					method: 'post',
					data: {
						repair_id: this.repairId ? this.repairId : 1,
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							_this.maintenance_obj = res.data.data;
							_this.upload_form.content_id = res.data.data.content_id;
							_this.upload_form.type_id = res.data.data.type_id;
							_this.upload_form.room_id = res.data.data.room_id;
							_this.upload_form.remark = res.data.data.remark;
							_this.upload_form.pics = res.data.data.pics;
							_this.upload_form.repair_id = res.data.data.repair_id;
							if (res.data.data.content && res.data.data.type) {
								let str = '';
								let content_str = '';
								switch (res.data.data.content.type) {
									case 1:
										str = res.data.data.type.repair_type_id;
										content_str = res.data.data.content.repair_type_id;
										for (let i = 0; i < _this.repair_list.length; i++) {
											if (str == _this.repair_list[i].repair_type_id) {
												_this.num = i;
												for (let j = 0; j < _this.repair_list[i].next_level.length; j++) {
													if (_this.repair_list[i].next_level[j].repair_type_id ==
														content_str) {
														_this.repair_list[i].next_level[j].boolen = true;
													}

												}
											}
										}
										break;
									case 2:
										str = res.data.data.type.repair_type_id;
										content_str = res.data.data.content.repair_type_id;
										for (let i = 0; i < _this.repair_list.length; i++) {
											if (str == _this.repair_list[i].repair_type_id) {
												_this.maintenance_num = i;
												for (let j = 0; j < _this.repair_list[i].next_level.length; j++) {
													if (_this.repair_list[i].next_level[j].repair_type_id ==
														content_str) {
														_this.repair_list[i].next_level[j].boolen = true;
													}

												}
											}
										}
										break;

								}
							}
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//更新数据
			// updateRepair() {
			// 	let base_url = uni.getStorageSync('host');
			// 	console.log(base_url);
			// 	let _this = this;
			// 	this.form.content_id = this.content_id;
			// 	this.form.type_id = this.type_id;
			// 	this.form.pics = this.uploadFile.join(',');
			// 	if (this.form.room_id) {
			// 		request({
			// 			url: base_url + 'teacher/repair/updateRepair',
			// 			method: 'post',
			// 			data: {
			// 				...this.form,
			// 			},
			// 			success(res) {
			// 				if (res.statusCode == 200) {
			// 					console.log(res.data);
			// 					_this.$toLink('../maintenance/maintenance', {});
			// 				} else {
			// 					_this.$refs.uToast.show({
			// 						title: res.data.message || '系统错误',
			// 						type: 'warning',
			// 					})
			// 				}

			// 			}
			// 		})
			// 	} else {
			// 		this.$refs.uToast.show({
			// 			title: '请选择位置',
			// 			type: 'warning',
			// 		})
			// 	}

			// },
			//获取到信息化报修
			typeLists(param) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let str = param;
				let _this = this;
				request({
					url: base_url + 'teacher/repair/typeLists',
					data: {
						type: str,
					},
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							switch (str) {
								case 1:
									for (let i = 0; i < res.data.data.length; i++) {
										console.log('进来了吗');
										_this.repair_list.push({
											name: res.data.data[i].name,
											next_level: [],
											repair_type_id: res.data.data[i].repair_type_id,
											boolen: false,
										})
									}
									_this.repair_list.shift();
									for (let j = 0; j < _this.repair_list.length; j++) {
										console.log('进去了吗');
										for (let k = 0; k < res.data.data[j].next_level
											.length; k++) {
											_this.repair_list[j].next_level.push({
												name: res.data.data[j].next_level[k].name,
												repair_type_id: res.data.data[j].next_level[k]
													.repair_type_id,
												boolen: false,

											})
										}
									}
									console.log(_this.repair_list);
									break;
								case 2:
									for (let i = 0; i < res.data.data.length; i++) {
										console.log('进来了吗');
										_this.maintenance_lists.push({
											name: res.data.data[i].name,
											next_level: [],
											repair_type_id: res.data.data[i].repair_type_id,
										})
									}
									_this.maintenance_lists.shift();
									for (let j = 0; j < _this.maintenance_lists.length; j++) {
										console.log('进去了吗');
										for (let k = 0; k < res.data.data[j].next_level
											.length; k++) {
											_this.maintenance_lists[j].next_level.push({
												name: res.data.data[j].next_level[k].name,
												repair_type_id: res.data.data[j].next_level[k]
													.repair_type_id,
												boolen: false,

											})
										}
									}
									console.log(_this.maintenance_lists);
									break;
							}

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			change_teacher(param1, param2) {
				switch (this.activeIndex) {
					case 0:
						for (let i = 0; i < this.repair_list.length; i++) {
							this.repair_list[i].boolen = false;
							for (let j = 0; j < this.repair_list[i].next_level.length; j++) {
								this.repair_list[i].next_level[j].boolen = false;
							}
						}
						this.repair_list[param1].boolen = true;
						this.repair_list[param1].next_level[param2].boolen = true;
						this.type_id = this.repair_list[param1].repair_type_id;
						this.content_id = this.repair_list[param1].next_level[param2].repair_type_id;
						console.log(this.type_id, this.content_id);
						break;
					case 1:
						for (let i = 0; i < this.maintenance_lists.length; i++) {
							this.maintenance_lists[i].boolen = false;
							for (let j = 0; j < this.maintenance_lists[i].next_level.length; j++) {
								this.maintenance_lists[i].next_level[j].boolen = false;
							}
						}
						this.maintenance_lists[param1].boolen = true;
						this.maintenance_lists[param1].next_level[param2].boolen = true;
						this.type_id = this.maintenance_lists[param1].repair_type_id;
						this.content_id = this.maintenance_lists[param1].next_level[param2].repair_type_id;
						break;
				}
			},
			toggle_reason(param) {
				console.log(param);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		overflow: hidden;
		background: #F2F2F2;
		height: 100vh;

		.top {
			width: 100%;
			height: 65rpx;
			background: #fff;
			overflow: hidden;
			border-bottom: 1px solid #F2F2F2;

			.topBox {
				width: 100%;
				height: 65rpx;
				background: #fff;
				position: relative;
				display: flex;
				justify-content: space-evenly;

				view {
					height: 65rpx;
					line-height: 65rpx;
					width: 300rpx;
					text-align: center;
					font-size: 30rpx;
					color: #fff;
					color: #333333;

					text {
						display: none;
					}


				}

				.con {
					position: relative;
					height: 65rpx;
					line-height: 65rpx;
					color: #2f96fe;
					width: 300rpx;

					text {
						display: block !important;
						position: absolute;
						width: 140rpx;
						height: 4rpx;
						background: #2f96fe;
						bottom: 0rpx;
						left: 80rpx;
					}
				}

			}
		}

		.entire {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			height: 79rpx;

			view {
				&:nth-child(1) {
					width: 226rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					border-right: 1rpx solid #e5e5e5;
					text-align: center;
					line-height: 79rpx;
					font-size: 30rpx;
					background: #F9F8F8;
					color: #666666;
				}

				&:nth-child(2) {
					width: 524rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					line-height: 79rpx;
					font-size: 26rpx;
					display: flex;
					background: #fff;
					justify-content: flex-start;
					color: #666666;

					text {
						&:nth-child(1) {
							margin-left: 26rpx;

						}

						&:nth-child(2) {
							margin-left: 315rpx;

						}
					}

				}
			}
		}

		.grade_list {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			background: #fff;
			border-bottom: 1rpx solid #e5e5e5;

			.grade {
				width: 226rpx;

				#sub {
					width: 100%;
					height: 79rpx;
					background-color: #fff;
					line-height: 79rpx;
					text-indent: 1em;
					border-bottom: 1rpx solid #e5e5e5;
					border-right: none;
					color: #2f96fe;
					box-sizing: border-box;
					font-size: 30rpx;
				}



				.grade_line {
					width: 100%;
					height: 79rpx;
					background-color: #f9f8f8;
					line-height: 79rpx;
					text-indent: 1em;
					border-bottom: 1rpx solid #e5e5e5 !important;
					border-right: 1rpx solid #e5e5e5;
					color: #666666;
					box-sizing: border-box;
					font-size: 30rpx;

					&:last-child {
						border-bottom: none;
					}
				}

				.active {
					border-bottom: none !important;
				}
			}

			#teacher {
				width: 524rpx;

				.total_teacher {
					width: 100%;
					height: 79rpx;
					line-height: 79rpx;
					background: #fff;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					text-indent: 1em;
					display: flex;
					justify-content: flex-start;
					color: #666666;
					font-size: 26rpx;

					text {
						&:nth-child(1) {
							font-size: 26rpx;
							margin-left: 8rpx;
							width: 248rpx;
						}

						&:nth-child(2) {
							margin-left: 115rpx;

						}
					}
				}

				.all_teacher {
					width: 100%;
					height: 79rpx;
					line-height: 79rpx;
					background: #fff;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					text-indent: 1em;
					display: flex;
					justify-content: flex-start;
					color: #666666;
					font-size: 26rpx;

					text {
						&:nth-child(1) {
							font-size: 26rpx;
							margin-left: 8rpx;
							width: 248rpx;
						}

						&:nth-child(2) {
							margin-left: 115rpx;

						}
					}

					&:last-child {
						border-bottom: none;
					}
				}

			}
		}

		.location {
			width: 750rpx;
			height: 83rpx;
			background: #fff;

			view {
				&:nth-child(1) {
					width: 710rpx;
					margin-left: 20rpx;
					height: 83rpx;
					align-items: center;
					display: flex;
					justify-content: flex-start;
					background: #fff;
					border-bottom: 1rpx solid #e5e5e5;

					text {
						&:nth-child(1) {
							font-size: 26rpx;
							color: #666666;
							width: 120rpx;
						}

						&:nth-child(2) {
							font-size: 18rpx;
							width: 120rpx;
							height: 30rpx;
							text-align: center;
							line-height: 30rpx;
							width: 450rpx;
							text-align: right;
						}

						&:nth-child(3) {
							font-size: 18rpx;
							width: 120rpx;
							margin-left: 15rpx;
							height: 30rpx;
							text-align: center;
							line-height: 30rpx;
							background: #EDF4FD;
							border: 1rpx solid #EEEEEE;

						}
					}
				}
			}


		}

		.remark {
			width: 750rpx;
			height: 83rpx;
			background: #fff;

			view {
				&:nth-child(1) {
					width: 710rpx;
					margin-left: 20rpx;
					height: 83rpx;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					border-bottom: 1rpx solid #e5e5e5;

					text {
						&:nth-child(1) {
							font-size: 26rpx;
							color: #666666;
							width: 150rpx;
						}
					}
				}
			}


		}

		.upload {
			width: 750rpx;
			height: 83rpx;
			background: #fff;

			view {
				&:nth-child(1) {
					width: 710rpx;
					height: 83rpx;
					margin-left: 20rpx;
					background: #fff;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-bottom: 1rpx solid #e5e5e5;

					text {
						&:nth-child(1) {
							width: 150rpx;
							font-size: 26rpx;
							color: #666666;
						}

						&:nth-child(2) {
							margin-left: 320rpx;
							width: 200rpx;
							font-size: 28rpx;
							color: #333333;
						}
					}

					image {
						&:nth-child(3) {
							width: 25rpx;
						}
					}
				}
			}
		}

		.confirm {
			width: 100%;
			height: 250rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.verify {
				width: 200rpx;
				height: 60rpx;
				border-radius: 50rpx;
				text-align: center;
				line-height: 60rpx;
				background: linear-gradient(to right, #2C78FE, #32B0FF);
				color: #fff;
				font-size: 30rpx;
			}

			.cancel {
				width: 200rpx;
				height: 60rpx;
				border-radius: 50rpx;
				text-align: center;
				line-height: 60rpx;
				background: #fff;
				color: #666666;
				font-size: 30rpx;
			}
		}
	}
</style>
